<template>
    <div class="warning-chart">
       <svg width="240px" height="224px" id="warn_el_k" version="1.1" viewBox="0 0 240 224" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
            <metadata id="warn_el_l">
            <rdf:RDF>
            <cc:Work rdf:about="">
                <dc:format>image/svg+xml</dc:format>
                <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
                <dc:title>画板</dc:title>
            </cc:Work>
            </rdf:RDF>
            </metadata>
            <!-- Generator: Sketch 56.3 (81716) - https://sketch.com -->
            <title id="warn_el_m">画板</title>
            <desc id="warn_el_n">Created with Sketch.</desc>
            <defs id="warn_el_o">
            <linearGradient id="warn_el_j" x1="47.166%" x2="52.834%" y2="95.46%">
            <stop id="warn_el_p" stop-color="#2BC2FF" offset="0"/>
            <stop id="warn_el_q" stop-color="#008CFF" offset="1"/>
            </linearGradient>
            <linearGradient id="warn_el_a" y1="44.305%" y2="55.178%">
            <stop id="warn_el_r" stop-color="#2BC2FF" offset="0"/>
            <stop id="warn_el_s" stop-color="#008CFF" offset="1"/>
            </linearGradient>
            <linearGradient id="warn_el_h" x1="50%" x2="50%" y2="100%">
            <stop id="warn_el_t" stop-color="#fbb" offset="0"/>
            <stop id="warn_el_u" stop-color="#DF4646" offset="1"/>
            </linearGradient>
            <linearGradient id="warn_el_g" x1="50%" x2="50%" y1="1.9452%" y2="100%">
            <stop id="warn_el_v" stop-color="#ddd" offset="0"/>
            <stop id="warn_el_w" stop-color="#949494" offset="1"/>
            </linearGradient>
            <linearGradient id="warn_el_f" x1="100%" x2="0%" y1="50%" y2="51.69%">
            <stop id="warn_el_x" stop-color="#fbb" offset="0"/>
            <stop id="warn_el_y" stop-color="#DF4646" offset="1"/>
            </linearGradient>
            <linearGradient id="warn_el_e" x1="100%" x2="0%" y1="51.073%" y2="51.073%">
            <stop id="warn_el_z" stop-color="#ddd" offset="0"/>
            <stop id="warn_el_aa" stop-color="#949494" offset="1"/>
            </linearGradient>
            <linearGradient id="warn_el_d" y1="50.964%" y2="50%">
            <stop id="warn_el_ab" stop-color="#fbb" offset="0"/>
            <stop id="warn_el_ac" stop-color="#DF4646" offset="1"/>
            </linearGradient>
            <linearGradient id="warn_el_c" y1="47.316%" y2="47.316%">
            <stop id="warn_el_ad" stop-color="#2BC2FF" offset="0"/>
            <stop id="warn_el_ae" stop-color="#008CFF" offset="1"/>
            </linearGradient>
            <linearGradient id="warn_el_b" x1="100%" x2="0%" y1="50%" y2="50%">
            <stop id="warn_el_af" stop-color="#2BC2FF" offset="0"/>
            <stop id="warn_el_ag" stop-color="#008CFF" offset="1"/>
            </linearGradient>
            <linearGradient id="warn_el_i" y1="55.224%" y2="55.224%">
            <stop id="warn_el_ah" stop-color="#ddd" offset="0"/>
            <stop id="warn_el_ai" stop-color="#949494" offset="1"/>
            </linearGradient>
            </defs>
            <g id="画板" fill-rule="evenodd">
                <g fill="url(#warn_el_j)">
                    <path id="warn_el_aj" d="m238.29 9h1.7094v206l-26.667 9-26.667-9v-206h1.7094l24.957-9 24.957 9z" opacity=".2"/>
                    <path id="warn_el_ak" d="m51.624 9h1.7094v206l-26.667 9-26.667-9v-206h1.7094l24.957-9 24.957 9z" opacity=".2"/>
                    <path id="warn_el_al" d="m144.96 9h1.7094v206l-26.667 9-26.667-9v-206h1.7094l24.957-9 24.957 9z" opacity=".2"/>
                </g>
                <path id="warn_el_ap" d="m186.67 206 26.667-9 26.667 9-26.667 9-26.667-9z" fill="url(#warn_el_h)"/>
                <path id="warn_el_aq" d="m93.333 146 26.667-9 26.667 9-26.667 9-26.667-9z" fill="url(#warn_el_a)"/>
                <path id="warn_el_ar" d="m0 66 26.667-9 26.667 9-26.667 9-26.667-9z" fill="url(#warn_el_g)"/>
                <polygon id="warn_el_as" :points="column.red.sideface[1].points" fill="url(#warn_el_f)"/>
                <polygon id="warn_el_at" :points="column.gray.sideface[1].points" fill="url(#warn_el_e)"/>
                <polygon id="warn_el_rrl" transform="translate(200 215) scale(-1 1) translate(-200 -215)" :points="column.red.sideface[0].points" fill="url(#warn_el_d)"/>
                <polygon id="warn_el_au" transform="translate(106.67 185) scale(-1 1) translate(-106.67 -185)" :points="column.blue.sideface[0].points" fill="url(#warn_el_c)"/>
                <polygon id="warn_el_av" :points="column.blue.sideface[1].points" fill="url(#warn_el_b)"/>
                <polygon id="warn_el_aw" transform="translate(13.333 145) scale(-1 1) translate(-13.333 -145)" :points="column.gray.sideface[0].points" fill="url(#warn_el_i)"/>
            </g>
            <g fill="url(#warn_el_a)">
                <path id="warn_el_am" d="m186.67 9 26.667-9 26.667 9-26.667 9-26.667-9z" opacity=".3"/>
                <path id="warn_el_an" d="m93.333 9 26.667-9 26.667 9-26.667 9-26.667-9z" opacity=".3"/>
                <path id="warn_el_ao" d="m0 9 26.667-9 26.667 9-26.667 9-26.667-9z" opacity=".3"/>
            </g>
        </svg>

    </div>
</template>
<script>
import _ from 'lodash'
import TWEEN from '@tweenjs/tween.js'

export default {
    components: {
    },
    data() {
        return {
            LO: _,
            height: 224 - 18, //图表的尺寸
            column: {
                gray: {
                    sideface: [
                        {
                            id: '#warn_el_aw',
                            points: [0, 224, 26.667, 214.82, 26.667, 66, 0, 75]
                        },
                        {
                            id: '#warn_el_at',
                            points: [26.667, 224, 53.333, 214.82, 53.333, 66, 26.667, 75]
                        }
                    ],
                    topface: {
                        id: '#warn_el_ar',
                        fix: 149
                    }
                },
                blue: {
                    sideface: [
                        {
                            id: '#warn_el_au',
                            points: [93.333, 224, 120, 214.82, 120, 146, 93.333, 155],
                        },
                        {
                            id: '#warn_el_av',
                            points: [120, 224, 146.67, 214.82, 146.67, 146, 120, 155]
                        }
                    ],
                    topface: {
                        id: '#warn_el_aq',
                        fix: 69
                    }
                },
                red: {
                    sideface: [
                        {
                            id: '#warn_el_rrl',
                            points: [186.67, 224, 213.33, 214.82, 213.33, 206, 186.67, 215],
                        },
                        {
                            id: '#warn_el_as',
                            points: [213.33, 224, 240, 214.82, 240, 206, 213.33, 215]
                        }
                    ],
                    topface: {
                        id: '#warn_el_ap',
                        fix: 9
                    }
                }
            },
            points_gray: [
                [0, 224, 26.667, 214.82, 26.667, 66, 0, 75],
                [26.667, 224, 53.333, 214.82, 53.333, 66, 26.667, 75]
            ],
            points_blue: [
                [93.333, 224, 120, 214.82, 120, 146, 93.333, 155],
                [120, 224, 146.67, 214.82, 146.67, 146, 120, 155]
            ],
            points_red: [
                [186.67, 224, 213.33, 214.82, 213.33, 206, 186.67, 215],
                [213.33, 224, 240, 214.82, 240, 206, 213.33, 215]
            ]
        };
    },
    props: {
        data: {
            type: Object,
            default(){
                return {
                    one: 22,
                    two: 66,
                    three: 60
                }
            }
        },
        maxValue: {
            type: Number,
            default: 100
        }
    },
    mounted(){
        this.chartUpdate()
        window.tt = this
        this.tweenLoop()
    },
    watch: {
        data:{
            deep: true,
            handler(){
                this.chartUpdate()
            }
        }
    },
    methods:{
        tweenLoop(){
            function animate(time) {
                requestAnimationFrame(animate)
                TWEEN.update(time)
            }
            requestAnimationFrame(animate)
        },
        setChartVal(name, value){
            let amount  = value  / (this.maxValue / this.height)
            let face1 = Snap.select(this.column[name].sideface[0].id)
            let face2 = Snap.select(this.column[name].sideface[1].id)

            let coords1 = {y:0}

            const tween = new TWEEN.Tween(coords1)
            .to({y:  amount}, 1000)
            .easing(TWEEN.Easing.Quadratic.Out)
            .onUpdate(() => {
                let points = _.clone(this[`points_${name}`][0])

                points[7] = this.column[name].sideface[0].points[1] - coords1.y
                points[5] = this.column[name].sideface[1].points[3] - coords1.y

                this[`points_${name}`][0] = points
                face1.attr({
                    points
                })
                //--
                points = _.clone(this[`points_${name}`])[1]
                points[7] = this.column[name].sideface[0].points[1] - coords1.y
                points[5] = this.column[name].sideface[1].points[3] - coords1.y

                this[`points_${name}`][1] = points

                face2.attr({
                    points
                })
            })
            .start()
            
            let faceTop = Snap.select(this.column[name].topface.id)
            var mtx_top = new Snap.Matrix()

            mtx_top.translate(0,  this.column[name].topface.fix);
            faceTop.transform(mtx_top);

            const coords = {y: 0}
            let tem = coords.y
            const tween2 = new TWEEN.Tween(coords)
            .to({y: - amount}, 1000)
            .easing(TWEEN.Easing.Quadratic.Out)
            .onUpdate(() => {
                mtx_top.translate(0, coords.y - tem);
                faceTop.transform(mtx_top);
                tem = coords.y
            })
            .start()
        },
        chartUpdate(){
            this.setChartVal('gray', this.data.one)
            this.setChartVal('blue', this.data.two)
            this.setChartVal('red', this.data.three)
        }
    }
};
</script>
<style lang="scss">
.warning-chart{

}
</style>
